<template>
  <div>
    <h1>【aty-poptip】 component demo</h1>
    <p>【aty-poptip】 本质</p>
    <aty-row class="fd-poptip-box">
      <aty-row>
        <aty-title level="4">1.【aty-poptip】 基础</aty-title>
        <aty-panel>支持三种触发方式：鼠标悬停、点击、聚焦。默认是点击。</aty-panel>
        <aty-panel>注意 Poptip 内的文本使用了 white-space: nowrap;，即不自动换行，如需展示很多内容并自动换行时，
          建议给内容 slot 增加样式 white-space: normal;。</aty-panel>
        <aty-poptip trigger="hover" content="这里是提示文字" title="title">
          <aty-button>Hover</aty-button>
        </aty-poptip>
        <aty-poptip content="这里是提示文字" title="title">
          <aty-button>click</aty-button>
        </aty-poptip>
        <aty-poptip trigger="focus" content="这里是提示文字" title="title">
          <aty-button>focus</aty-button>
        </aty-poptip>
        <aty-poptip trigger="focus" content="这里是提示文字" title="title">
          <aty-input placeholder="input  focus" />
        </aty-poptip>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-poptip】 位置</aty-title>
        <aty-row class="top">
          <aty-poptip title="Title" content="Top Left text" placement="top-start">
            <aty-button>Top Left</aty-button>
          </aty-poptip>
          <aty-poptip title="Title" content="Top Center text" placement="top">
            <aty-button>Top Center</aty-button>
          </aty-poptip>
          <aty-poptip title="Title" content="Top Right text" placement="top-end">
            <aty-button>Top Right</aty-button>
          </aty-poptip>
        </aty-row>
        <aty-row class="center">
          <div class="center-left">
            <aty-poptip title="Title" content="Left Top text" placement="left-start">
              <aty-button>Left Top</aty-button>
            </aty-poptip><br /><br />
            <aty-poptip title="Title" content="Left Center text" placement="left">
              <aty-button>Left Center</aty-button>
            </aty-poptip><br /><br />
            <aty-poptip title="Title" content="Left Bottom text" placement="left-end">
              <aty-button>Left Bottom</aty-button>
            </aty-poptip>
          </div>
          <div class="center-right">
            <aty-poptip title="Title" content="Right Top text" placement="right-start">
              <aty-button>Right Top</aty-button>
            </aty-poptip><br /><br />
            <aty-poptip title="Title" content="Right Center text" placement="right">
              <aty-button>Right Center</aty-button>
            </aty-poptip><br /><br />
            <aty-poptip title="Title" content="Right Bottom text" placement="right-end">
              <aty-button>Right Bottom</aty-button>
            </aty-poptip>
          </div>
        </aty-row>
        <aty-row class="bottom">
          <aty-poptip title="Title" content="Bottom Left text" placement="bottom-start">
            <aty-button>Bottom Left</aty-button>
          </aty-poptip>
          <aty-poptip title="Title" content="Bottom Center text" placement="bottom">
            <aty-button>Bottom Center</aty-button>
          </aty-poptip>
          <aty-poptip title="Title" content="Bottom Right text" placement="bottom-end">
            <aty-button>Bottom Right</aty-button>
          </aty-poptip>
        </aty-row>
      </aty-row>
      <aty-row>
        <aty-title level="4">3.【aty-poptip】 从浮层内关闭</aty-title>
        <aty-poptip placement="top" v-model="visible">
          <aty-button>Multiple lines</aty-button>
          <div slot="title"><i>Custom title</i></div>
          <div slot="content">
            <a @click="close">close</a>
          </div>
        </aty-poptip>
      </aty-row>
      <aty-row>
        <aty-title level="4">4.【aty-poptip】 复杂嵌套</aty-title>
        <aty-poptip placement="top-start">
          <aty-button>Click</aty-button>
          <div class="api" slot="content">

            <aty-table
              :pageable-data="tableData"
              :width="200">
              <aty-table-column
                prop="date"
                label="日期"
                width="180" />
              <aty-table-column
                prop="name"
                label="姓名"
                width="180" />
              <aty-table-column
                prop="address"
                label="地址" />
            </aty-table>

          </div>
        </aty-poptip>
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-poptip】 确认</aty-title>
        <aty-poptip confirm
                    title="你确定删除这个条目?"
                    @ok="ok"
                    @cancel="cancel"
                    ok-text="确定"
                    cancel-text="取消">
          <aty-button>Delete</aty-button>
        </aty-poptip>
        <aty-poptip confirm
                    title="Are you sure delete this task?"
                    @ok="ok"
                    @cancel="cancel"
                    ok-text="yes"
                    cancel-text="no">
          <aty-button>Internationalization</aty-button>
        </aty-poptip>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data () {
    return {
      visible: false,
      disabled: false,
      tableData: (function (len) {
        var _data = []
        for (var i = 0; i < len; i++) {
          _data.push({
            date: '2016-05-0' + i,
            name: '赵六',
            tag: '公司',
            address: '上海市普陀区金沙江路 1516 弄'
          })
        }
        return _data
      })(4)
    }
  },
  methods: {
    close () {
      this.visible = false
    },
    ok () {
      Artery.message.info('You click ok')
    },
    cancel () {
      Artery.message.info('You click cancel')
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-poptip-box {
        margin: 20px;
        text-align: left;
    }
    .top,.bottom{
        text-align: center;
    }
    .center{
        width: 300px;
        margin: 10px auto;
        overflow: hidden;
    }
    .center-left{
        float: left;
    }
    .center-right{
        float: right;
    }
</style>
